<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    #div1 {
      width: 600px;
      height: 600px;
      position: relative;
      border: 1px solid black;
      margin: 100px auto;
    }

    #ball {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: red;
      bottom: 31px;
      left: 249px;
    }

    #bat {
      width: 100px;
      height: 30px;
      background-color: blue;
      position: absolute;
      bottom: 0;
      left: 250px;
    }

    #brick div {
      width: 98px;
      height: 18px;
      border: 1px solid black;
      position: relative;
      float: left;
    }
  </style>
  <script>
    window.onload = function () {
      // 获取外部的盒子
      var oDiv1 = document.getElementById("div1");
      // 获取球
      var oBall = document.getElementById("ball");
      // 获取最底下的木板
      var oBat = document.getElementById("bat");
      // 获取砖块
      var oBrick = document.getElementById("brick");
      // 获取所有砖块
      var oDivs = oBrick.getElementsByTagName("div");

      // 随机产生60块砖块
      creatBrick(60, oBrick);
      // 控制底下木板的移动，鼠标按下与鼠标弹起的动作
      dragX(oBat);
      // 随机产生x方向和y方向的速度，这个速度的值已经计算好了
      var speedX = parseInt(Math.random() * 4) + 3;
      var speedY = parseInt(Math.random() * 3) + 5;
      var timer = null;
      timer = setInterval(function () {
        // 设置球在x方向上的运动
        oBall.style.left = oBall.offsetLeft + speedX + "px";

        // 如果球超出盒子外，则将速度值取反
        if (oBall.offsetLeft >= 580 || oBall.offsetLeft <= 0) {
          speedX *= -1;
        }
        // 设置球在y方向上的运动
        oBall.style.top = oBall.offsetTop + speedY + "px";
        if (oBall.offsetTop <= 0) {
          speedY *= -1;
        }
        // 这里设置的是：如果盒子没有碰到木板，则游戏失败
        if (oBall.offsetTop > 580) {
          alert("game over!");
          clearTimeout(timer);
        }
        // 判断：如果球与木板相碰了就将速度值取反
        if (knock(oBall, oBat)) {
          speedY *= -1;
        }
        // 在这里判断求与方块是否有碰撞
        for (let i = 0; i < oDivs.length; i++) {
          // 如果球与方块碰撞了就将速度值取反
          if (knock(oDivs[i], oBall)) {
            speedY *= -1;
            // 移出与球碰撞过的方块
            oBrick.removeChild(oDivs[i]);
            break;
          }
        }
      }, 30);
    };

    // 设置木板运动的函数
    function dragX(node) {
      // 当鼠标按下时
      node.onmousedown = function (ev) {
        var e = ev || window.event; //浏览器兼容问题
        var offsetX = e.clientX - node.offsetLeft;
        document.onmousemove = function (ev) {
          var e = ev || window.event;
          var l = e.clientX - offsetX;
          if (l <= 0) {
            l = 0;
          }
          if (l >= 500) {
            l = 500;
          }
          node.style.left = l + "px";
        };
      };
      document.onmouseup = function () {
        document.onmousemove = null;
      };
    }

    // 创建方块函数
    function creatBrick(n, node) {
      for (let i = 0; i < n; i++) {
        var divs = document.createElement("div");
        // 设置背景色
        divs.style.backgroundColor = randomColor(divs);
        node.appendChild(divs);
      }
      var oBricks = node.getElementsByTagName("div");
      // 设置每个方块的位置
      for (let i = 0; i < oBricks.length; i++) {
        oBricks[i].style.left = oBricks[i].offsetLeft + "px";
        oBricks[i].style.top = oBricks[i].offsetTop + "px";
      }
      // 设置好position为absolute，前面设置的方向才能生效
      for (let i = 0; i < oBricks.length; i++) {
        oBricks[i].style.position = "absolute";
      }
    }

    // 产生随机色的函数
    function randomColor(node) {
      var opa = Math.random() * 2;
      if (opa > 1) {
        opa = opa - 1;
      }
      node.style.background =
        "rgba(" +
        parseInt(Math.random() * 256) +
        "," +
        parseInt(Math.random() * 256) +
        "," +
        Math.floor(Math.random() * 256) +
        "," +
        opa +
        ")";
    }

    // 判断是否碰撞的函数
    function knock(node1, node2) {
      var l1 = node1.offsetLeft;
      var ll1 = node1.offsetLeft + node1.offsetWidth;
      var t1 = node1.offsetTop;
      var tt1 = node1.offsetTop + node1.offsetHeight;

      var l2 = node2.offsetLeft;
      var ll2 = node2.offsetLeft + node2.offsetWidth;
      var t2 = node2.offsetTop;
      var tt2 = node2.offsetTop + node2.offsetHeight;
      // 找到碰不到的情况
      if (l2 > ll1 || ll2 < l1 || t2 > tt1 || tt2 < t1) {
        return false;
      } else {
        return true;
      }
    }
  </script>
</head>

<body>
  <div id="div1">
    <!-- 滚动的球 -->
    <div id="ball"></div>
    <!-- 最底下的木板 -->
    <div id="bat"></div>
    <!-- 需要被球打的砖块 -->
    <div id="brick">
      <!-- <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div> -->
    </div>
  </div>
</body>

</html>